<%--
  Created by IntelliJ IDEA.
  User: css
  Date: 2018/7/4
  Time: 12:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 水平表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.validate.min.js" type="text/javascript"></script>
    <style type="text/css">
        .error{
            color:red
        }
    </style>
    <script type="text/javascript">
        $.validator.addMethod("checkUsername",function(value,element,param){
            var flag=false;
            $.ajax({
                "async":false,
                "url":"${pageContext.request.contextPath}/CheckUsernameServlet?flag=${requestScope.flag}",
                "data":{"username":value},
                "type":"POST",
                "dataType":"json",
                "success":function(data){
                    flag = data.isExist;
                },
                "error":function(XMLHttpRequest, textStatus, errorThrown){
                    alert(XMLHttpRequest+" "+textStatus+" "+errorThrown);
                }
            });
            return !flag;
        });
        $(function(){
            $("#myform").validate({
                rules:{
                    "uname":{
                        "required":true,
                        "checkUsername":true
                    },

                    "email":{
                        "required":true,
                        "email":true
                    },
                    "telephone":{
                        "required": true,
                        "rangelength":[11,11]
                    },
                    "idCord":{
                        "required": true,
                        "rangelength":[18,18]
                    }
                },
                messages:{
                    "uname":{
                        "required":"用户名不能为空",
                        "checkUsername":"用户名已存在"
                    },
                    "email":{
                        "required":"邮箱不能为空",
                        "email":"邮箱格式不正确"
                    },
                    "telephone":{
                        "required": "电话号码不能为空",
                        "rangelength":"电话号码位数不正确"
                    },
                    "idCord":{
                        "required": "身份证号不能为空",
                        "rangelength":"请输入正确的身份证号"
                    }
                }
            });
        });
    </script>
</head>
<body>
<center>
    <div style="width: 1000px;">
        <form action="addUser" method="post" class="form-horizontal" id="myform" role="form">
            <div class="form-group">
                <label for="firstname" class="col-sm-2 control-label">昵称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${setUser.uname}" name="uname" id="firstname"
                           placeholder="请输入昵称">
                </div>
            </div>
            <input type="hidden" name="isFlag" value="${requestScope.flag}"/>
            <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${setUser.name}" name="name" id="lastname"
                           placeholder="请输入姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="firstname" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${setUser.email}" name="email" id="firstname"
                           placeholder="请输入邮箱">
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">电话</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${setUser.telephone}" name="telephone" id="lastname"
                           placeholder="请输入电话号码">
                </div>
            </div>



            <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="sex"  id="optionsRadios3" value="1" checked> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" id="optionsRadios4"  value="2"> 女
                    </label>
                </div>
            </div>



            <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">身份证号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${setUser.idCord}" name="idCord" id="lastname"
                           placeholder="请输入身份证号">
                </div>
            </div>
            <div class="form-group">
                <label for="firstname" class="col-sm-2 control-label">工资</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${setUser.salary}" name="salary" id="firstname"
                           placeholder="请输入工资">
                </div>
            </div>

            <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">部门</label>
                <div class="col-sm-10">
                    <select name="sid" class="form-control">
                        <c:forEach items="${sessionScope.sections}" var="section">
                            <c:if test="${section.sname!='BOSS'}">
                                <option value="${section.sid}">${section.sname}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">权限</label>
                <div class="col-sm-10">
                    <select name="root" class="form-control">
                        <option value="3">普通员工</option>
                        <c:if test="${user.root==1}">
                            <option value="2">高管</option>
                        </c:if>

                    </select>
                </div>
            </div>
            <div style="width: 500px; margin: 0 auto;">
                <button type="submit" class="btn btn-default btn-lg btn-block">提交</button>
            </div>
        </form>

    </div>
</center>

</body>
</html>
